<!--
 * @Author: jiu yin
 * @Date: 2024-04-10 16:22:58
 * @LastEditTime: 2024-04-24 16:38:05
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\components\custom_navbar\index.vue
 * jiu
-->

<template>
   <view :style="{ height: navHeight + 'px' }">
      <u-navbar :bgColor="theme == 'light' ? '#fff' : 'transparent'">

         <view :class="[theme == 'light' ? 'u-nav-slot_light' : 'u-nav-slot_dark']" slot="left">
            <u-icon name="arrow-left" size="19" @click="goBack()"
               :color="theme == 'light' ? '#3D3D3D' : '#fff'"></u-icon>
            <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
            <u-icon name="home-fill" size="20" @click="goSwitch()"
               :color="theme == 'light' ? '#3D3D3D' : '#fff'"></u-icon>
         </view>

         <view :class="[theme == 'light' ? 'text-black' : 'text-white', 'text-bold']" slot="center">{{ title }}</view>

      </u-navbar>
   </view>
</template>

<script>
import { navigateTo, switchTab, navigateBack } from "@/hooks"

export default {
   // theme: light || dark
   props: ["bgColor", "title", "theme"],
   data() {
      return {
         navigateBack,
         navigateTo,
         switchTab,
         navHeight: 80
      }
   },
   onLoad(options) {
   },
   watch: {
      theme(newValue, oldValue) {
         if (newValue !== oldValue) {
            this.setNavigationBarColor()
         }
      },
   },


   mounted() {
      this.setNavigationBarColor()
      this.getNavHeight()
   },
   methods: {
      setNavigationBarColor() {
         let frontColor = this.theme == 'light' ? '#000000' : '#ffffff'
         uni.setNavigationBarColor({ frontColor, backgroundColor: '#000000', })
      },
      getNavHeight() {		 
         let { height, top } = uni.getMenuButtonBoundingClientRect()
         this.navHeight = height + top
         this.$emit('getNavHeight', this.navHeight)
      },
      resetMap() {
         this.$store.commit("map/reset")
      },
      goBack() {
         this.resetMap()
         navigateBack()
      },
      goSwitch() {
         this.resetMap()
         switchTab('/pages/home/index')
      }
   }
}
</script>

<style lang="scss" scoped>
.u-nav-slot_light {
   background-color: #fff;
   @include flex;
   align-items: center;
   justify-content: space-between;
   border: 2rpx solid $u-border-color;
   border-radius: 64rpx;
   padding: 12rpx 24rpx;
   opacity: 0.8;
}

.u-nav-slot_dark {
   background: rgba(0, 0, 0, 0.15);
   @include flex;
   align-items: center;
   justify-content: space-between;
   border: 2rpx solid rgba(255, 255, 255, 0.254);
   border-radius: 64rpx;
   padding: 12rpx 24rpx;
   opacity: 0.8;
}
</style>